{% extends "base.html" %}

{% block title %}小飞老师{% endblock %}

{% block content %}
<section class="intro">
    <div class="module">
        <h2 style="text-align: center;">我是一名IT码农、大学老师<br>旨在分享和传播知识，为广大学习者提供有价值的信息</h2>
        <p><a href="http://www.liufeisheng.cn/">我的更多信息</a>    <a href="" >与我联系</a></p>
        <p>本站是小飞老师利用业余闲暇时间设计与开发的，旨在为学生示范如何将课堂上所学的知识应用于实际的网站设计与开发中。</p>

        <p>本站开发中目前涉及的主要知识点
            <li><b>HTML 与 CSS 基本设计基础：</b> 学习网页的基本结构和样式布局，掌握响应式设计技巧。</li>
            <li><b>JavaScript 动态网页设计：</b> 通过 JavaScript 实现网页的动态交互功能，提升用户体验。</li>
            <li><b>前端开发框架：</b> 使用 jQuery、Vue 等前端框架，开发模块化和高效的前端应用。</li>
            <li><b>数据库管理：</b> 学习数据库的基本操作与管理，为网站提供数据支持。</li>
            <li><b>Linux 操作系统与服务器配置：</b> 了解 Linux 系统的基本操作，以及服务器的配置与管理。</li>
            <li><b>Web 安全：</b> 掌握常见的 Web 安全漏洞与防护措施，确保网站的安全性。</li>
            <li><b>Docker 容器技术：</b> 通过 Docker 容器化技术，实现应用的快速部署与管理。</li>
            <li><b>Git 版本管理：</b> 学习 Git 的使用方法，进行项目的版本控制与协作开发。</li>
        </p>
    </div>
    
    
    <h1>网站设计与开发知识模块</h1>

    <div class="module">
        <h2>大一（基础阶段）</h2>
        <h3>HTML & CSS 基础</h3>
        <p>知识点：网站结构、HTML标签、CSS选择器、布局模型、响应式设计。</p>
        <p>本站涉及：网站基本架构设计、布局</p>
        <p>课程：Web 前端开发基础</p>

        <h3>JavaScript 基础</h3>
        <p>知识点：变量、数据类型、函数、DOM 操作、事件处理。</p>
        <p>本站涉及：网站动态设计，配合python的Django、Flask框架或者TypeScript共同实现/p>
        <p>课程：JavaScript 程序设计</p>
    </div>

    <div class="module">
        <h2>大二（进阶阶段）</h2>
        <h3>前端框架基础</h3>
        <p>知识点：jQuery、React 或 Vue.js 基础、组件化开发、状态管理。</p>
        <p>本站涉及：jQuery、Vue的组件开发</p>
        <p>课程：前端框架应用</p>

        <h3>后端开发基础</h3>
        <p>知识点：服务器、API、数据库、RESTful 接口。</p>
        <p>本站涉及：ubuntu系统、MySQL和MongoDB数据库</p>
        <p>课程：后端开发入门（Django、Flask、Express 等）</p>
    </div>

    <div class="module">
        <h2>大三（综合应用阶段）</h2>
        <h3>全栈开发</h3>
        <p>知识点：前后端交互、用户认证、数据持久化、应用部署。</p>
        <p>本站涉及：Docker容器数据持久化保存、网站交互功能</p>
        <p>课程：全栈开发实战</p>

        <h3>数据库设计与管理</h3>
        <p>知识点：数据库设计规范、SQL、非关系型数据库、数据库优化。</p>
        <p>本站涉及：博客、用户等信息采用数据库保存</p>
        <p>课程：数据库系统</p>
    </div>

    <div class="module">
        <h2>大四（项目实践阶段）</h2>
        <h3>Web 安全基础</h3>
        <p>知识点：XSS、CSRF、SQL 注入、身份验证、数据加密。</p>
        <p>本站涉及：网站基本防护</p>
        <p>课程：Web 安全与加固</p>

        <h3>项目管理与部署</h3>
        <p>知识点：版本控制（Git）、CI/CD 流水线、Docker 容器化、SSH远程控制、云部署。</p>
        <p>本站涉及：开发过程使用Git进行版本控制，开发完后使用Docker技术容器化，部署到Ubuntu服务器上</p>
        <p>课程：软件工程与项目管理</p>
    </div>
    

    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        

        .module {
            margin-bottom: 20px;
        }

        .module h2 {
            background-color: #4CAF50;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        .module h3 {
            margin-bottom: 5px;
            color: #4CAF50;
        }

        .module p {
            margin: 0 0 10px 0;
            padding-left: 20px;
        }

        .module ul {
            list-style-type: disc;
            margin-left: 40px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .module h2 {
                font-size: 18px;
            }

            .module h3 {
                font-size: 16px;
            }
        }
    </style>
 
</section>

{% endblock %}